<template>
  <div
    class="userinfos-avatar f-j-a-c"
    :class="{ 'userinfos-avatar-dav': showDv }"
    :style="{
      width: divWidth + 'px',
      height: divWidth + 'px',
      'margin-left': marginLeft + 'px',
    }"
  >
    <el-image
      class="userimg-avatar"
      :src="userImgs"
      fit="cover"
      :lazy="true"
      :style="{ width: imgWidth + 'px', height: imgWidth + 'px' }"
    ></el-image>

    <!-- 大v 官方认证 -->
    <svg-icon
      v-if="showDv"
      class="svg icon-dav"
      name="icon-dav"
      :style="{ 'font-size': dvWidht + 'px', bottom: dvBottom + 'px' }"
    ></svg-icon>
  </div>
</template>
<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
} from "vue";
export default defineComponent({
  props: {
    userImgs: {
      type: String,
      default: "",
    },
    showDv: {
      type: Boolean,
      default: false,
    },
    divWidth: {
      type: [String, Number],
      default: "42",
    },
    imgWidth: {
      type: [String, Number],
      default: "42",
    },
    marginLeft: {
      type: [String, Number],
      default: 0,
    },
    dvWidht: {
      type: [String, Number],
      default: 16,
    },
    dvBottom: {
      type: [String, Number],
      default: 2,
    },
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();
    let data = reactive({
      defaultImg: new URL("../assets/image/tx@2x.png", import.meta.url),
    });
    return {
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.userinfos-avatar {
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  // z-index:9;
  z-index:1;
  > .userimg-avatar {
    border-radius: 50%;
  }

  .icon-dav {
    position: absolute;
    right: -2px;
  }
}

.userinfos-avatar-dav {
  border: 0.5px solid #fab030;
  > .userimg-avatar {
    border: 2px solid #fab030;
  }
}
</style>
